<template>
  <el-card class="filter-container">
    <template #header>
      <div class="filter-header">
        <h3>
          <el-icon><FilterFilled /></el-icon> 筛选
        </h3>
      </div>
    </template>

    <div class="filter-section">
      <h4>
        <el-icon><Management /></el-icon> 社团类别
      </h4>
      <el-radio-group v-model="filterType" @change="filter">
        <el-radio label="all">全部</el-radio>
        <el-radio label="science-tech"
          ><el-icon><DataAnalysis /></el-icon> 学科技术类</el-radio
        >
        <el-radio label="arts-sports"
          ><el-icon><Tickets /></el-icon> 文艺体育类</el-radio
        >
        <el-radio label="public-service"
          ><el-icon><Star /></el-icon> 公益服务类</el-radio
        >
        <el-radio label="career-development"
          ><el-icon><OfficeBuilding /></el-icon> 职业发展类</el-radio
        >
        <el-radio label="international-exchange"
          ><el-icon><Connection /></el-icon> 国际交流类</el-radio
        >
        <el-radio label="innovation-entrepreneurship"
          ><el-icon><MagicStick /></el-icon> 创新创业类</el-radio
        >
        <el-radio label="entertainment"
          ><el-icon><Headset /></el-icon> 娱乐休闲类</el-radio
        >
      </el-radio-group>
    </div>
  </el-card>
</template>

<script>
import {
  FilterFilled,
  Management,
  DataAnalysis,
  Tickets,
  Star,
  OfficeBuilding,
  Connection, // 新图标
  MagicStick,
  Headset,
} from '@element-plus/icons-vue';

export default {
  components: {
    FilterFilled,
    Management,
    DataAnalysis,
    Tickets,
    Star,
    OfficeBuilding,
    Connection,
    MagicStick,
    Headset,
  },
  data() {
    return {
      filterType: 'all',
    };
  },
  methods: {
    filter() {
      this.$emit('filter', { type: this.filterType });
    },
  },
};
</script>

<style scoped>
/* 主容器样式 */
.filter-container {
  width: 100%;
}

/* 标题样式 */
.filter-header {
  display: flex;
  align-items: center;
}

.filter-header h3 {
  margin: 0;
  font-weight: bold;
  font-size: 1.2em;
}

.filter-header .el-icon {
  margin-right: 8px;
}

.filter-section {
  margin-top: 20px;
}

.filter-section h4 {
  margin: 0 0 15px 0;
  color: #666;
  font-weight: bold;
  font-size: 1em;
  display: flex;
  align-items: center;
}

.filter-section h4 .el-icon {
  margin-right: 8px;
}

.el-radio-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.el-radio {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  
}
.el-radio .el-icon {
  margin-right: 4px;
  vertical-align: middle;
  font-size: 16px; /* 设置一个统一的大小 */
  width: 16px; /* 确保宽度一致 */
  height: 16px; /* 确保高度一致 */
}

/* 选中后整体变为橙色 */
::v-deep.el-radio-button__inner.is-active {
  border-color: #FFA600!important; /* 橙色边框 */
  background-color: #FFA600!important; /* 橙色背景 */
  color: #FFFFFF; /* 白色文字 */
}

/* 选中后图标变为橙色 */
::v-deep.el-radio-button__inner.is-active .el-icon {
  color: #FFFFFF; /* 图标颜色设置为白色，以确保在橙色背景上可见 */
}
/* 选中后整体变为橙色，针对Element Plus的单选按钮 */
::v-deep .el-radio__input.is-checked .el-radio__inner {
  border-color: #FFA600; /* 橙色边框 */
  background-color: #FFA600; /* 橙色背景 */
}

::v-deep .el-radio__input.is-checked + .el-radio__label {
  color: #FFA600; /* 橙色文字 */
}

/* 选中后图标变为橙色，确保图标颜色也改变 */
::v-deep .el-radio__input.is-checked + .el-radio__label .el-icon {
  color: #FFA600; /* 橙色图标 */
}
</style>